<template>
    <div style="width: 95%;margin: 0 auto;margin-top: 1%;">
        <el-table :data="cartList" style="width: 100%">
                <el-table-column prop="coverImg" label="商品图片" />
                <el-table-column prop="goodsName" label="商品信息" />
                <el-table-column prop="price" label="单价" />
                <el-table-column prop="number" label="数量" />
                <el-table-column prop="price,number" label="总计" >
                    <template #default="scope">
                        <div>{{ goodmoney(scope.row) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template #default="scope">
                        <div style="color: red;border: 1px solid;" @click="delete(scope.row)">删除订单</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="detail_message">
                <div class="message_left">订单详情:</div>
                <div class="message_right">
                    <div class="right_item">
                        <label>商品价格</label>
                        <label>￥{{ goodprice }}</label>
                    </div>
                    <div class="right_item">
                        <label>运费</label>
                        <label>￥{{ delivery }}</label>
                    </div>
                    <div class="right_item">
                        <label>优惠</label>
                        <label>￥{{ discount }}</label>
                    </div>
                </div>
            </div>
            <div class="ft_btn">
                <button @click="submitOrder">立即结算</button>
            </div>
    </div>
</template>

<script>
import { cartList, cartSumMoney, deleteCart } from '@/utils/api/goods';

export default {
    data(){
        return{
            cartList:[],
            goodprice:0,
            delivery:0,
            discount:0
        }
    },
    created(){
        cartList({userId:this.$store.state.user.userId},this.$store.state.user.token).then(data=>{
            this.cartList=data
            const newlist=[]
            this.cartList.map(list=>{
                newlist.push(list.specId)
            })
            console.log(newlist.length)
            if(newlist.length!==0){
                cartSumMoney(newlist,this.$store.state.user.token).then(money=>{
                    console.log("价格",money)
                })
            }
        })
    },
    methods:{
        goodmoney(event){
            return event.price*event.number
        },
        submitOrder(){

        },
        delete(event){
            console.log("删除")
            deleteCart(event.specId).then(data=>{
                console.log("删除",data)
            })
        }
    }
}

</script>

<style>
.detail_message{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 5%;
    font-size: 20px;
}
.message_left{
    width: 30%;
    text-align: center;
}
.message_right{
    flex: 1;
    text-align: center;
}
.right_item{
    margin: 20px 0;
}
.right_item label{
    margin: 20px 40px;
}
.ft_btn{
    display: flex;
    margin: 30px 0;
}
.ft_btn button{
    background-color: black;
    color: #fff;
    padding: 20px 40px;
    margin-left: auto;
    margin-right: 200px;
}
</style>